<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-18 10:03:29
-->
<template>
  <div>
    <div class="body">
      <h1 >豆瓣最受欢迎的影评</h1>
<!-- 左 -->
      <div class="left">
        <span>最受欢迎的/<router-link to="/Comment2" style="font-size:0.95em;color:#999">新片评论</router-link></span>
<!-- 第一个 -->
        <div class="discuss">
          <img style="width: 75px;height: 105px;float: left" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2259429113.webp" alt="">
          
          <div class="main_hd">
            <span>
              <img style="width: 24px;height: 24px;float: left;cursor:pointer;" src="https://img2.doubanio.com/icon/u214009903-1.jpg" alt="">
              <a style="float:left;cursor:pointer;font-size:13px;color: #37a;"> 不朽浩克</a>
              <el-rate style="float: left;"
                v-model="value1"
                disabled
              >
              </el-rate>
              2021-10-11 17:38:43
            </span>
          </div>

          <div class="main_bd">
            <div class="h2">
              <a style="color: #37a;">善恶的横截面</a>
            </div>
            <div class="text">
              《历劫佳人》是奥逊威尔斯在好莱坞时期的最后一部作品，也是黑色电影的里程碑之作。他为了获得拍摄自由费尽了心思，甚至不惜放低姿态去跟制片人搞好关系，可却在最终剪辑的阶段前功尽弃，制片方完全剥夺了威尔斯的剪辑权，根据商业目的自行修改出了一个支离破碎的版本。看到自...
              (<a style="cursor:pointer;">展开</a>)
            </div>
          </div>
        </div>
<!-- 第二个 -->
        <div class="discuss">
          <img style="width: 75px;height: 105px;float: left" src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2681329386.webp" alt="">
          
          <div class="main_hd">
            <span>
              <img style="width: 24px;height: 24px;float: left;cursor:pointer;" src="https://img2.doubanio.com/icon/u47712639-13.jpg" alt="">
              <a style="float:left;cursor:pointer;font-size:13px;color: #37a;"> 不乐</a>
              <el-rate style="float: left;"
                v-model="value2"
                disabled
              >
              </el-rate>
              2021-10-10 17:35:04
            </span>
          </div>

          <div class="main_bd">
            <div class="h2">
              <a style="color: #37a;">凭什么你敢叫《长津湖》</a>
            </div>
            <div class="text">
              1分给里面志愿军在火车站集结那场戏，那种被时代洪流席卷推进，个体的的微不足道的渺小感把握住了。1分小战士被美国佬炸死在乱石堆那场戏。其它实在没有能给分的地方。 除了特效，还是特效，枪林弹雨里，竟然还有辗转腾挪的动作戏，你是在做游戏宣传片吗？人性除了光辉形象，没... 
              (<a style="cursor:pointer;">展开</a>)
            </div>
          </div>
        </div>
<!-- 第三个 -->
        <div class="discuss">
          <img style="width: 75px;height: 105px;float: left" src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2688747534.webp" alt="">
          
          <div class="main_hd">
            <span>
              <img style="width: 24px;height: 24px;float: left;cursor:pointer;" src="https://img2.doubanio.com/icon/u241555815-1.jpg" alt="">
              <a style="float:left;cursor:pointer;font-size:13px;color: #37a;"> 古筝</a>
              <el-rate style="float: left;"
                v-model="value3"
                disabled
              >
              </el-rate>
              2021-10-11 15:41:01
            </span>
          </div>

          <div class="main_bd">
            <div class="h2">
              <a style="color: #37a;">惊喜！好看！</a>
            </div>
            <div class="text">
              原来只是想支持一下，没想到还真不错，剧情不邋遢，所有人表演都在线，整体逻辑也可以，龚俊帅就不用说了！更让人想不到的是居然是一部偏歌舞的剧，歌唱得挺不错的，听声音以为是龚俊唱的，专门关注了演唱者，原来不是，但声音很像，不过这样才合理。相比于其他很多剧，这个能...  
              (<a style="cursor:pointer;">展开</a>)
            </div>
          </div>
        </div>
<!-- 第四个 -->
        <div class="discuss">
          <img style="width: 75px;height: 105px;float: left" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2677934359.webp" alt="">
          
          <div class="main_hd">
            <span>
              <img style="width: 24px;height: 24px;float: left;cursor:pointer;" src="https://img2.doubanio.com/icon/u239671286-2.jpg" alt="">
              <a style="float:left;cursor:pointer;font-size:13px;color: #37a;"> 隔壁车间玉主任</a>
              <el-rate style="float: left;"
                v-model="value4"
                disabled
              >
              </el-rate>
              2021-10-10 17:35:04
            </span>
          </div>

          <div class="main_bd">
            <div class="h2">
              <a style="color: #37a;">藏在《鱿鱼游戏》背景中韩国工人真实的抗争故事</a>
            </div>
            <div class="text">
              在网飞热播的韩国电视剧《鱿鱼游戏》中，由韩国影帝李政宰饰演的男主角成奇勋遭到汽车工厂裁员生活後每下愈况，最终因没钱给母亲治病才决定参与残酷的生存游戏。实际上《鱿鱼游戏》和很多近期广获好评的韩国作品一样，包含着大量的政治隐喻，揭露了很多韩国社会问题。 在故事发... 
              (<a style="cursor:pointer;">展开</a>)
            </div>
          </div>
        </div>
      </div>
<!-- 右 -->
      <div class="right">
        <p style="font-size:13px;color:#999;width:300px;line-height:1.7;">
          如果你觉得一篇评论对你有帮助，请你点击“有用”。你的投票直接决定哪些评论出现在豆瓣首页和“豆瓣最受欢迎的评论”里，以及在书、电影和音乐介绍页里评论的排序。
        </p>
        <p style="color:#999;font: 13px Helvetica,Arial,sans-serif;line-height:1.7;">
          所有“没用”的点击都是匿名的。
        </p>
        <div class="follow">
          <span>
            <img src="https://img3.doubanio.com/f/shire/4bace6d78006ece72f0e4a2b714fcfe3b54dd4e2/pics/feed1.png" alt="">
            <a href="https://movie.douban.com/feed/review/movie" style="color: #37a;text-decoration: none;cursor: pointer;font-size: 13px;">订阅豆瓣最受欢迎的影评</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .body{
    width: 1040px;
    height: 750px;
    margin: 0 auto;
    .left{
      width: 675px;
      float: left;
      padding-right: 40px;
      .discuss{
        border-top: 1px solid #ccc;
        width: 675px;
        // height: 188.333px;
        padding: 20px 0px 20px;
        .main_hd{
          
        }
        .main_bd{
          width: 565px;
          // height: 154.333px;
          margin: 10px 0px 0px 0px;
          padding: 0px 10px 0px 100px;
          position: relative;
          .h2{
            width:565px;
            line-height:150%;
            float:left;
            cursor:pointer;
            font-size:14px;
            margin:10px 0px 10px 0px;
          }
          .text{
            width: 565px;
            font-size: 13px;
          }
          // .agree{
          //   width: 24px;
          //   height: 24px;
          //   overflow: hidden;
          //   position: absolute;
          //   top: 130px;
          // }
        }
      }
    }
    .right{
      float: left;
    }
  }
</style>

<script>
  export default {
    data() {
      return {
        value1: 5,
        value2: 2,
        value3: 5,
        value4: 3
      }
    },
  }
</script>